<!--
 *角色管理：添加弹框组件，子组件
 * @Author: 舒克
 * @Official Accounts: 氧化1028
 * @email: 143587623@qq.com
 * @github: https://gitee.com/KingSio
 * @Date: 2021-02-03 15:45:04
 * @LastEditTime: 2021-02-08 15:36:54
 * @FilePath: \Vue全栈后台\项目\vue_shop\src\components\power\rolesFrame.vue
 *没完善，只是可以打开
-->
<template>
  <div>
       <!-- 添加用户的对方框 -->
    <!--  判断使用那个组件，已经不用这个方法判断 -->
    <el-dialog
      :title="title"
      :visible.sync="addDialogVisibleShow"
       width="50%"
      :before-close="addDialogClosed"
    >
    <el-form
      label-width="80px"
      :model="FormRoles"
      :rules="FormRolesRules"
      ref="FormRolseRef"
    >
      <el-form-item label="角色名称" prop="roleName">
        <el-input v-model="FormRoles.roleName"></el-input>
      </el-form-item>
      <el-form-item label="角色描述" prop="roleDesc">
        <el-input v-model="FormRoles.roleDesc"></el-input>
      </el-form-item>
    </el-form>
        <!-- 底部区域 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogClosed">取 消</el-button>
        <el-button type="primary" @click="addUser(title)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { addRolesData,postEditRolesData} from '@/api/powerApi'
  export default {
    props:{
        addDialogVisibleShow:Boolean,//控制对话框隐藏显示
        title:String,//控制对话框的文本标题
        editRolseData:Object
    },
    data() {
      return {
        //表单数据
        FormRoles: {
          roleName:"",
          roleDesc:""
        },
         //   添加角色表单验证
      FormRolesRules: {
        roleName: [
          { required: true, message: '请输入角色名称', trigger: 'blur' }
        ],
        roleDesc: [
          { required: true, message: '请输入角色描述', trigger: 'blur' }
        ]
      },

      };
    },
    watch:{
      editRolseData:{
        deep:true,//深度监听
        handler(newVal,oldVal){
           //如果存在就使用修改的数据
            if(this.editRolseData){
              this.FormRoles=this.editRolseData
            }
        }
      }
    },
    methods:{
      //监听添加用户弹框，关闭弹框
      addDialogClosed(){
        this.$refs.FormRolseRef.resetFields()//，没有进行添加，默认清空清空弹框的表单数据
        //通过子传父emit关闭弹框
        this.$emit('update:addDialogVisibleShow', false)
      },
      
      //添加用户,修改用户事件
     async addUser(title){
        //根据title来确定是添加还是修改
        if(title=="添加用户"){
          const {data:res}=await addRolesData(this.FormRoles)
        }else{
          //编辑提交的数据
          const {data:res}=await postEditRolesData(this.editRolseData.roleId,this.editRolseData)
          if (res.meta.status != 200) return this.$message.error('修改用户失败')
          this.$message.success('修改用户成功')
        }
         //通过子传父emit关闭弹框
        this.$emit("update:addDialogVisibleShow",false)
        this.updatedGetRolesData()//去到一个不存在的路由，然后再跳转回来
        
      },
       //数据修改后，父组件不刷新，使用这个方法
      updatedGetRolesData(){
        let NewPage = "/test"//去到一个不存在的路由，然后再跳转回来
        this.$router.push(NewPage);
        this.$router.go(-1);
      }
    
    }
  }
</script>